<template>
	<view style="display: flex;flex-direction: column;align-items: center;">
		<view style="background-color: #fff;width: 90%;">
			访客数量
			<qiun-data-charts :opts="opts" type="bar" :chartData="chartData" />
		</view>
		<image src="../../static/shuju.png" style="" mode="aspectFit"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {
					categories: ["技术部", "采购部", "质管部", "市场部", "人力资源部", "销售部"],
					series: [{
						name: "访客数量",
						data: [4560, 3775, 1921, 2220, 2000, 1000]
					}]
				},
				opts: {
					extra: {
						bar: {
							type: "group",
							width: 30,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							linearType: "custom",
							barBorderCircle: true,
							seriesGap: 2,
							categoryGap: 2
						}
					}
				}
			}
		},
		methods: {

		}
	}
</script>

<style>
	page {
		background-color: #f7fafd;
	}
</style>
